<template>
  <div class="shutdown">
    <el-button type="primary" size="mini">近7日</el-button>
    <el-table
      ref="Table"
      :data="tableData"
      tooltip-effect="dark"
      v-loading="loading"
    >
      <el-table-column label="车间" prop='workshopName'></el-table-column>
      <el-table-column label="产线" prop='lineName'></el-table-column>
      <el-table-column label="停机设备" prop='equipName'></el-table-column>
      <el-table-column label="停机开始时间" prop="latestOffStartTime" min-width="150"></el-table-column>
      <el-table-column label="停机结束时间" prop='latestOffEndTime' min-width="150"></el-table-column>
      <el-table-column label="累计停机时长(分钟)" prop='totalOffMinutes'></el-table-column>
      <el-table-column label="停机次数" prop='totalOffTimes'></el-table-column>
    </el-table>

    <pagination
      v-if='pager.total > 5'
      :total="pager.total"
      :pageSizes="[5,10,20]"
      :page.sync="pager.pageNum"
      :limit.sync="pager.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
  import {getOffEquipment} from "@/api/workbench/index";
export default {
  props:{
    queryData:{
      type:String,
      default:""
    },
    queryType:{
      type:String,
      default:""
    }
  },
  data() {
    return {
      tableData:[],
      loading: false,
      queryParams:"",
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 5
      },
      refreshTimer:null
    };
  },

  // created() {
  //   this.getList()
  // },

  methods:{
    setRefreshTimer(){
      if (this.refreshTimer) {
        clearTimeout(this.refreshTimer);
      }
      this.refreshTimer = setTimeout(() => {
        this.getList();
        this.setRefreshTimer();
      },60000)
    },
    getList() {
      let query = {queryDays:"7"}
      if(this.queryType == "line"){
        query.lineIds = this.queryParams;
      }
      else if(this.queryType == "station"){
        query.workStationId = this.queryParams;
      }
      this.loading = true;
      const { pageNum, pageSize } = this.pager;
      const param = {
        query: {
          ...query
        },
        pageNum,
        pageSize,
      };
      getOffEquipment(param)
      .then((res) => {
        this.tableData = res?.rows || this.tableData;
        this.pager.total = res?.total || 0;
        this.loading = false;
      })
      .catch(() => {
        this.tableData = [];
        this.pager.total = 0;
        this.loading = false;
      });
    }
  },
  watch:{
    queryData:{
      handler(newVal){
        if(newVal){
          this.queryParams = newVal;
        }
        // 清除轮询
        if (this.refreshTimer) {
          clearTimeout(this.refreshTimer);
        }
        this.getList()
        this.setRefreshTimer()
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy(){
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
    }
  },
  destroyed(){
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
    }
  }
};
</script>
<style lang="scss" scoped>
.shutdown{
  text-align:right;
  button{
    margin-bottom: 20px;
  }
}

</style>
